<template>
  <div class="plant-list">
    <el-button type="primary" @click="$router.push('/plants/new')">新增植物</el-button>
    <el-table :data="plants" border style="margin-top: 20px">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="植物名称"></el-table-column>
      <el-table-column prop="category" label="分类"></el-table-column>
      <el-table-column prop="stock" label="库存"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="editPlant(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deletePlant(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { usePlantStore } from '@/stores/plantStore';

const router = useRouter();
const plantStore = usePlantStore();
const plants = computed(() => plantStore.plants);

function editPlant(row) {
  router.push(`/plants/edit/${row.id}`);
}

function deletePlant(id) {
  plantStore.deletePlant(id);
}
</script>

<style scoped>
.plant-list {
  padding: 20px;
}
</style>
